<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="点击" id="btn">
    <img src="images/小黑.jpg" id="pic">

</body>

<script>
    // 获取元素
    var btn = document.getElementById("btn")
    var pic = document.getElementById("pic")
    // 给按钮添加点击事件
    btn.onclick = function () {
        //  给图片换src的属性值
        pic.src = "images/2.JPG"

    }


    /* 在函数内部有一个this指向事件源
    区分不同函数内部的this指向:
    1.普通函数-->window对象
    2.构造函数-->生成的实例对象 new
    3.对象的方法-->指向对象自己
    4.事件函数-->指向事件源 */
</script>

</html>